import { getFoodByShopNameAndApi, getRoomDetailApi, getRoomDetailListApi, getRoomListApi } from '@/api/shopman'
import { useRequest } from 'ahooks'
import { Divider } from 'antd'
import { FC, useCallback, useEffect, useState } from 'react'
import styled from 'styled-components'
import AppRoomSearsh from './AppRoomSearch'
import AppRoomTable from './AppRoomTable'

const StyledMain = styled.div`
padding: 50px 50px;
`
const AppRoomList: FC = () => {
  const [tel, setTel] = useState('')
  const [shopName, setShopName] = useState('')
  // 获取全部门店分类
  const { data, run: getRoomList } = useRequest(getRoomListApi)
  // 获取查询内容
  const { data: list = [], run: getRoomDetail } = useRequest((shopName: string, tel: string) => getFoodByShopNameAndApi(shopName, tel))
  // 获取所有门店信息
  const { data: listCount = [] } = useRequest(getRoomDetailListApi)

  const handleSubmit = useCallback(async (shopName: string, tel: string) => {
    await getRoomDetail(shopName, tel)
    setTel(tel)
    setShopName(shopName)
  }, [tel, shopName])

  useEffect(() => {
    handleSubmit(shopName, tel)
  }, [tel,shopName])
  return (
    <StyledMain>
      {
        data&&<AppRoomSearsh data={data} submit={(shopName: string, tel: string) => handleSubmit(shopName, tel)}/>
      }
      <Divider />
      {
        listCount?<AppRoomTable data={listCount}/>
        :
        <AppRoomTable datalist={list}/>
      }
    </StyledMain>
  )
}

export default AppRoomList
